<template>
    <div class="roleAdd">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="角色名称:" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="角色code:" prop="code">
          <el-input v-model="ruleForm.code" />
        </el-form-item>
        <el-form-item label="角色描述:" prop="description">
          <el-input v-model="ruleForm.description" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRoute, useRouter } from "vue-router";
  import { reactive, ref } from "vue";
  import { ElMessage, type FormInstance, type FormRules } from "element-plus";
  //导入工具 - 密码校验
  import { checkPass } from "@/assets/js/utils";
  import axios from "@/assets/js/axios";
  const route = useRoute();
  const router = useRouter();
  //接收传递过来的id
  if (route.query.id) {
    //修改元信息标题
    console.log("id:", route.query.id);
    route.meta.title = "权限管理 / 角色管理 / 角色编辑";
  
    axios
      .get("/serviceedu/edu-role/getById/" + route.query.id, {})
      .then((res: any) => {
        ruleForm.name = res.data.data.name;
        ruleForm.description = res.data.data.description;
        ruleForm.code = res.data.data.code;
        ruleForm.id = res.data.data.id;
      });
  }
  
  interface RuleForm {
    id?: number;
    name: string;
    code: string;
    description: string;
  }
  
  const formSize = ref("default");
  const ruleFormRef = ref<FormInstance>();
  const ruleForm = reactive<RuleForm>({
    name: "",
    code: "",
    description: "",
  });
  
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: "请输入角色名", trigger: "blur" },
      { min: 2, max: 20, message: "角色名2-20个字符长度", trigger: "blur" },
    ],
    code: [{ required: true, message: "请输入角色code", trigger: "blur" }],
    description: [{ required: true, message: "请输入角色描述", trigger: "blur" }],
  });
  
  //点击保存
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        if (route.query.id) {
          axios
            .put("/serviceedu/edu-role/updateRole", ruleForm)
            .then((res: any) => {
              if (res.code == 200) {
                ElMessage({
                  type: "success",
                  message: "修改角色成功",
                });
                router.push("/Prole");
              }
            });
        } else {
          axios
            .post("/serviceedu/edu-role/addRole", ruleForm)
            .then((res: any) => {
              if (res.code == 200) {
                ElMessage({
                  type: "success",
                  message: "新增角色成功",
                });
                router.push("/Prole");
              }
            });
        }
      } else {
        console.log("error submit!", fields);
      }
    });
  };
  
  //点击重置
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };
  </script>
  
  <style lang="less" scoped></style>
  